<!-- 货代单列表 -->
<template>
  <div class="forward-order">
    <el-row class="nav">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>货品库存</el-breadcrumb-item>
				<el-breadcrumb-item>库存调拨</el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<el-row class="search-bar">
			<el-col :span="18">
				<el-form :inline="true" size="small">
          <el-form-item >
						<el-input v-model="search.stockorder" placeholder='采购单号' clearable></el-input>
					</el-form-item>
					<el-form-item >
						<el-input v-model="search.mfn" placeholder='MFN' clearable></el-input>
					</el-form-item>
          <el-form-item>
          <el-select clearable  v-model="search.step" placeholder="请选择">
            <el-option
                    v-for="item in sysConfig.PurchaseOrder.step"
                    :key="item.key"
                    :label="item.val"
                    :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getforwardOrderlist()">检索</el-button>
					</el-form-item>
					<el-form-item>
						<el-button @click="clearSerach()">重置</el-button>
					</el-form-item>
          <!-- <el-form-item>
						<el-button @click="pushforwardOrder()">查看</el-button>
					</el-form-item> -->
				</el-form>
			</el-col>
		</el-row>
    <el-row class="table">
      <el-table stripe ref="forwardOrderTable" :data="forwordorderlist" border>
        <!-- <el-table-column  type="selection" width="36"> </el-table-column> -->
        <el-table-column prop="name" label="名称" width="160"></el-table-column>
        <el-table-column prop="warehouseName" label="目的仓库" mini-width="35%"></el-table-column>
        <el-table-column prop="_transport_type" label="运输方式" mini-width="35%"></el-table-column>
        <el-table-column prop="date" label="预计发货日" mini-width="10%"></el-table-column>
        <el-table-column prop="_step" label="状态" mini-width="10%"></el-table-column>
        <el-table-column prop="remark" label="备注" mini-width="10%"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope" >
            <el-button type="text" @click="pushforwardOrder(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
		</el-row>
    <el-row class="pagination">
      <el-pagination
        :current-page.sync="pageDat.current_page"
        :page-size="parseInt(pageDat.per_page)"
        :page-sizes="[10,20,30,50]"
        layout="total,prev, pager, next,sizes,jumper"
        :total="pageDat.total"
        @current-change="changePageHandler"
        @size-change="changeSizeHandler"
      >
      </el-pagination>
		</el-row>
  </div>
</template>
<script>
import * as forwardOrderAPI from '@/api/forward'
import { mapGetters } from 'vuex'
  export default {
    data() {
       return {
         search: {
           stockorder: '',
           mfn: '',
           step: '',
           page: 1,
	  	   	 num_per_page: 10
          },
         forwordorderlist: [],
         pageDat: { per_page: 10 },
         stepList: [

         ],
       }
    },
    created() {
      this.getforwardOrderlist()
    },
    computed: {
      ...mapGetters(['sysConfig'])
    },
    methods: {
      getforwardOrderlist(searchdata = { }) {
        let self = this
        forwardOrderAPI.forwardOrderList(this.search)
        .then((data) => {
            this.forwordorderlist = data.dat.data
            this.pageDat.total = data.total
        }).catch((err) => {
          console.log(err)
        })
      },
      changePageHandler() {
	  	  this.getforwardOrderlist()
	  	},
	  	changeSizeHandler(size) {
	  		this.pageDat.per_page = size
        this.getforwardOrderlist()
      },
      clearSerach() {
        this.search = { }
      },
      pushforwardOrder(id = null) {
        this.$router.push({
          // path: '/logistmanage/forward/order',
          name: 'forwardOrder',
          query: {
            order_id: id
            }
          })
      }
    }
  }
</script>